
/**
 * @author: 善良的YWJ
 * Created by shanliangdeYWJ on 2020/09/11/23/46/02
 * @file: 06.3事件绑定四种写法.js
 * @description: "
 * 
 * 请输入文件描述内容
 * 
 *              " 
 * @link [Github](https://github.com/shanliangdeYWJ)
 */


// 写在构造器里
class Toggle1 extends Component {
  constructor(props) {
    super(props);
    this.state = { isToggleOn: true };
    // 绑定第一种 bind
    this.handle1 = this.handle1.bind(this);
  }

  handle1() { }
  // 绑定第二种 箭头函数
  handle2 = () => { /* 绑定完毕 这里可以访问 构造器 里的参数 */ };

  render() {
    return (
      // 写在 render 函数的 return 中 的html标签里
      <div>
        {/* 绑定三种 在这里bind 注意函数这里没加括号*/}
        <button onClick={this.handle1.bind(this)}></button>
        {/* 绑定第四种，这里是箭头函数 */}
        <button onClick={() => this.handle1()}></button>

        {/* 第二种 绑定完毕可以这样访问 但是不能传参*/}
        <button onClick={this.handle2}></button>
      </div>
    );
  }
}
